<template>
	<view>
		<view class="experienceDetail">
			<view class="banner">
				<swiper class="imgs" autoplay="true" interval="3000" duration="1000" @change="bannerChange">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image class="img" :src="item.url" background-size="cover" :data-img="item.url" @tap="previewImg">
						</image>
					</swiper-item>
				</swiper>
				<view class="banner-tag">{{ bannerIndex + 1 }}/{{ bannerList.length }}</view>
			</view>
			<view class="topic">
				<view class="title">
					<image src="../../../static/images/index/xd_icon1.png" mode="widthFix" class="icon"></image>
					<view>
						<view class="label">
							餐厨话题
						</view>
						<view class="val">
							2012-03-12 11:05
						</view>
					</view>
				</view>
				<view class="h1">
					给春天的五个提案
				</view>
				<view class="h2">
					去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一
				</view>
				<view class="h2">
					去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一
				</view>
				<view class="h3">
					<image src="../../../static/images/index/xd_icon5.png" mode="scaleToFill" class="icon"></image>给春天的五个提案
				</view>
			</view>
			<view class="comment_title">精选评论</view>
			<view class="comment">
				<image src="../../../static/images/index/invite_bg3.png" mode="widthFix" class="img"></image>
				<tui-icon name="more-fill" class="more" size="16"></tui-icon>
				<view class="h1">
					餐厨话题
				</view>
				<view class="h2">
					2012-03-22 11:05
				</view>
				<view class="h3">
					太好吃了，强推菠萝和青梅。脆虾和芒果也是远好于市场水平的，香菇酱和肉燥酱简直是懒人福音。
				</view>
				<view class="h4">
					<view class="label">
						7天前
					</view>
					<view class="val">
						<tui-icon name="agree" class="icon"></tui-icon>点赞<tui-icon name="community" class="icon"></tui-icon>评论
					</view>
				</view>
				<view class="hr"></view>
			</view>
			<view class="comment_more" @click="goMore">查看全部评论 <tui-icon name="arrowright" size="14"></tui-icon></view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="comment_fixed">
			<view class="label">
				<view class="nav">
					<tui-icon name="star" class="icon"></tui-icon>
					22
				</view>
				<view class="nav">
					<tui-icon name="eye" class="icon"></tui-icon>
					22
				</view>
				<view class="nav">
					<tui-icon name="community" class="icon"></tui-icon>
					22
				</view>
				<view class="nav">
					<tui-icon name="share" class="icon"></tui-icon>
					22
				</view>
			</view>
			<view class="val">
				写评论...
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require("@/utils/util.js")
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				bannerList: [{
					"url": "../../../static/images/index/invite_bg1.png"
				}, {
					"url": "../../../static/images/index/invite_bg1.png"
				}, {
					"url": "../../../static/images/index/invite_bg1.png"
				}, {
					"url": "../../../static/images/index/invite_bg1.png"
				}],
				bannerIndex: 0
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			//放大预览轮播图片
			previewImg: function(e) {
				var curImg = e.currentTarget.dataset.img;
				var bannerList = this.bannerList;
				if (!util.isEmpty(curImg) && bannerList.length > 0) {
					var urls = [];
					for (var i = 0; i < bannerList.length; i++) {
						urls[i] = bannerList[i].url;
					}
					uni.previewImage({
						current: curImg, // 当前显示图片的http链接
						urls: urls, // 需要预览的图片http链接列表
					})
				}
			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current;
			},
			goMore() {
				uni.navigateTo({
					url: '../allComment/allComment'
				})
			}
		},
	};
</script>

<style lang="scss">
	.experienceDetail {
		width: 100%;
		padding: 30rpx 30rpx 0;
		background: #fff;

		.banner {
			width: 100%;
			position: relative;

			.imgs {
				width: 100%;
				height: 390rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.banner-tag {
				position: absolute;
				color: #F7F8F9;
				bottom: 30rpx;
				right: 30rpx;
				padding: 4rpx 18rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				background-color: rgba(0, 0, 0, .4);
			}
		}

		.topic {
			width: 100%;
			background: #fff;
			margin-top: 20rpx;

			.title {
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.icon {
					width: 84rpx;
					height: 84rpx;
					margin-right: 20rpx;
				}

				.label {
					font-size: 26rpx;
					font-weight: bold;
					color: #111111;
				}

				.val {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			.h1 {
				font-size: 28rpx;
				font-weight: bold;
				color: #111111;
				margin-bottom: 20rpx;
			}

			.h2 {
				width: 100%;
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 40rpx;
			}
			.h3 {
				background-color: rgba(255, 150, 0, .06);
				border-radius: 20rpx;
				padding: 6rpx 20rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: #FF9600;
				display: inline-block;
				.icon {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
					margin: -4rpx 10rpx 0 0;
				}
			}
		}
		.comment_title {
			font-size: 30rpx;
			font-weight: bold;
			color: #111111;
			padding: 40rpx 10rpx 0;
		}
		.comment {
			width: 100%;
			position: relative;
			padding: 50rpx 0 0 95rpx;
			.img {
				width: 70rpx;
				height: 70rpx !important;
				border-radius: 50%;
				position: absolute;
				left: 0rpx;
				top: 40rpx;
			}
			.more {
				position: absolute;
				right: 0;
				top: 60rpx;
			}
			.h1 {
				font-size: 26rpx;
				font-weight: bold;
				color: #111111;
			}
			.h2 {
				margin-top: 8rpx;
				font-size: 22rpx;
				color: #AAAAAA;
			}
			.h3 {
				margin-top: 36rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}
			.h4 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;
				.label {
					font-size: 22rpx;
					color: #AAAAAA;
				}
				.val {
					font-size: 22rpx;
					color: #111111;
					.icon {
						font-size: 28rpx !important;
						vertical-align: middle;
						margin: -6rpx 10rpx 0 30rpx !important;
					}
				}
			}
			.hr {
				height: 1px;
				background: #EAE9E8;
				margin-top: 35rpx;
			}
		}
		.comment_more {
			width: 100%;
			line-height: 90rpx;
			text-align: center;
			font-size: 26rpx;
			color: #111111;
		}
	}
	.comment_fixed {
		width: 100%;
		height: 100rpx;
		background: #fff;
		padding-right: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		border: 1px solid #f7f7f7;
		.label {
			display: flex;
			padding-right: 30rpx;
			width: 100%;
			.nav {
				flex: 1;
				text-align: center;
				font-size: 22rpx;
				color: #000000;
				.icon {
					display: block !important;
					margin: 0 auto !important;
					font-size: 32rpx !important;
					color: #000000 !important;
				}
			}
		}
		.val {
			width: 350rpx;
			height: 58rpx;
			background: #F7F7F8;
			border-radius: 30rpx;
			font-size: 26rpx;
			color: #666666;
			padding-left: 30rpx;
			line-height: 58rpx;
			flex-shrink: 0;
		}
	}
</style>
